<template>
  <el-dialog v-dialogDrag :title="title" :visible.sync="visible">
    <el-form ref="form" :model="form" label-width="80px" :visable="true" :rules="rules">
      <el-form-item label="作者" required prop="author">
        <el-input v-model="form.author" />
      </el-form-item>
      <el-form-item label="试卷名" required prop="name">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="试卷标题" required prop="title">
        <el-input v-model="form.title" />
      </el-form-item>
      <el-form-item label="考试时间" required prop="lastTime">
        <el-input v-model="form.lastTime" type="number" />
      </el-form-item>
      <el-form-item label="试卷分数">
        <el-input v-model="form.score" type="number" disabled />
      </el-form-item>
      <div v-if="type=='add'">
        <el-form-item v-for="(item,index) in questionTypeList" :key="item" :label="item">
          <el-row :gutter="0">
            <el-col :span="2" :offset="2">题数:</el-col>
            <el-col :span="5">
              <el-input v-model="form.question[index].number" :placeholder="item+'数量'" />
            </el-col>
            <el-col :span="2" :offset="4">分值:</el-col>
            <el-col :span="5">
              <el-input v-model="form.question[index].score" :placeholder="item+'分数'" @blur="scoreChange" />
            </el-col>
          </el-row>
        </el-form-item>
      </div>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">确定</el-button>
        <el-button @click="onCancel">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script>
import { editExam, addExam } from '@/api/exam'
export default {
  data() {
    return {
      form: {
        question: [{}, {}, {}, {}, {}]
      },
      visible: false,
      question: [{ number: 10, score: 2 }, { number: 10, score: 2 }, { number: 10, score: 2 }, { number: 5, score: 4 }, { number: 2, score: 10 }],
      title: '',
      type: '',
      questionTypeList: ['单选题', '多选题', '判断题', '填空题', '案例题'],
      rules: {
        name: [
          { required: true, message: '请输入试卷名称', trigger: 'blur' }
        ],
        author: [
          { required: true, message: '请输入作者名称', trigger: 'blur' }
        ],
        title: [
          { required: true, message: '请输入试卷标题', trigger: 'blur' }
        ],
        lastTime: [
          { required: true, message: '请输入考试时间', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    scoreChange() {
      this.calScore()
    },
    calScore() {
      this.form.score = this.form.question.reduce((total, item) => {
        total += item.number * item.score
        return total
      }, 0)
    },
    onCancel() {
      this.visible = false
      this.form = { question: this.question }
    },
    onSubmit() {
      if (this.type === 'edit') {
        editExam(this.form).then(res => {
          if (res.success) {
            this.$message({
              message: '修改成功',
              type: 'success'
            })
            this.visible = false
          }
        })
      } else {
        // this.form.question = this.form.question
        addExam(this.form).then(res => {
          if (typeof window.navigator.msSaveBlob !== 'undefined') { // IE10对象
            window.navigator.msSaveBlob(new Blob([res], {
              type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
            }), 'test.docx')
          } else { // 普通对象
            const url = window.URL.createObjectURL(new Blob([res], {
              type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
            }))
            const link = document.createElement('a')
            link.style.display = 'none'
            link.href = url
            link.setAttribute('download', 'test.docx')
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link) // 下载完成移除元素
            window.URL.revokeObjectURL(url) // 释放掉blob对象
          }
          this.visible = false
          this.$parent.fetchData()
        })
      }
    },
    edit(record) {
      this.visible = true
      this.form = { question: this.question, ...record }
      this.type = 'edit'
      this.calScore()
    },
    add() {
      this.form = { question: this.question }
      this.visible = true
      this.type = 'add'
      this.calScore()
    }

  }
}
</script>
